<template>
    <el-menu
        class="el-menu-vertical-demo"
        :default-active="activeMenu"
        ref="menuu"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
        :collapse="isCollapse"
        @open="menuOpen"
        @close="menuClose"
    >
        <homeAsideTree :treeData="treeData"></homeAsideTree>
    </el-menu>
</template>

<script>
import homeAsideTree from '@/components/home/aside/asideTree'
import { getDataList } from '@/api/menuTree'

export default {
    name: 'homeAside',
    components: {
        homeAsideTree
    },
    computed: {
        isCollapse() {
            return this.$store.state.tab.isCollapse
        },
        activeMenu() {
            return this.$route.path
        }
    },
    data() {
        return {
            treeData: []
        }
    },
    created() {
        this.getInit()
    },
    methods: {
        getInit() {
            getDataList().then((res) => {
                this.treeData = res.data.menusData
            })
        },
        menuOpen() {},
        menuClose() {}
    }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    height: 100%;
    border: none;

    h3 {
        color: #fff;
        text-align: center;
        line-height: 48px;
    }
}
</style>
